<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文档展示配置</title>
<link rel="stylesheet" type="text/css" href="../zui/css/zui.min.css">
</head>

<body>
	<div id="app">
		<table class="table table-bordered setting-table">
			<thead>
				<tr>
					<td style="width: 150px;">参数名</td>
					<td style="width: 300px;">参数值</td>
					<td>说明</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="info">目录展示方式</td>
					<td>
						<label><input type="radio" name="catalogShowType" value="1" v-model="catalogShowType">分路径展示</label>
						<label><input type="radio" name="catalogShowType" value="2" v-model="catalogShowType">分标签展示</label>
					</td>
					<td>分路径：/api/data/getDataList 分标签：/api└/data└/getDateList└post└get</td>
				</tr>
				<tr>
					<td class="info">树形菜单展示方式</td>
					<td>
						<label><input type="radio" name="treeShowType" value="1" v-model="treeShowType">直角</label>
						<label><input type="radio" name="treeShowType" value="2" v-model="treeShowType">导航</label>
						<label><input type="radio" name="treeShowType" value="3" v-model="treeShowType">加减</label>
						<label><input type="radio" name="treeShowType" value="4" v-model="treeShowType">文件夹</label>
						<label><input type="radio" name="treeShowType" value="5" v-model="treeShowType">V型</label>
					</td>
					<td>请自行修改体验</td>
				</tr>
				<tr>
					<td class="info">是否展示字段的类型</td>
					<td>
						<label><input type="radio" name="showParamType" value="1" v-model="showParamType">是</label>
						<label><input type="radio" name="showParamType" value="0" v-model="showParamType">否</label>
					</td>
					<td>文档中是否展示类型："reference": "(boolean)"</td>
				</tr>
				<tr>
					<td class="info">仅使用上次请求参数</td>
					<td>
						<label><input type="radio" name="onlyUseLastParam" value="1" v-model="onlyUseLastParam">是</label>
						<label><input type="radio" name="onlyUseLastParam" value="0" v-model="onlyUseLastParam">否</label>
					</td>
					<td>每个接口都使用最后一次请求的header、form、body参数，参数列表有但上一次请求没有使用的则不会展示在请求参数里面，从未请求过则展示所有参数</td>
				</tr>
				<tr>
					<td class="info">自动填充请求参数</td>
					<td>
						<label><input type="radio" name="autoFillParam" value="1" v-model="autoFillParam">智能填充</label>
						<label><input type="radio" name="autoFillParam" value="2" v-model="autoFillParam">全部填充</label>
						<label><input type="radio" name="autoFillParam" value="0" v-model="autoFillParam">否</label>
					</td>
					<td>否：不填充，智能填充：只填充flag、time等后缀的参数，全部填充：对应不上类型的使用“我是默认字符串”填充</td>
				</tr>
				<tr>
					<td class="info">强制重写域名</td>
					<td>
						<label><input type="radio" name="forceRewriteDomain" value="1" v-model="forceRewriteDomain">是</label>
						<label><input type="radio" name="forceRewriteDomain" value="0" v-model="forceRewriteDomain">否</label>
					</td>
					<td>文档在本地，想调试线上接口就可以勾选此参数，这样“在线调试”处的请求地址就会被强制改为：“文档地址管理”处配置的重写域名+接口地址</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
<script src="../mg-ui/js/jquery-3.1.0.min.js"></script>
<script src="../zui/js/zui.min.js"></script>
<script src="../mg-ui/js/common.js"></script>
<script src="../mg-ui/js/mg-ui-cache-keys.js"></script>
<script src="../vue/vue.js"></script>

<script>
	var urlBase = "../../";
	var app = new Vue({
		el: '#app',
		data: {
			initCount: 6,
			catalogShowType: '',
			treeShowType: '',
			showParamType:'',
			onlyUseLastParam: '',
			autoFillParam: '',
			forceRewriteDomain: '',
			rewriteDomainUrl: '',
			userSettings: {},
			// 默认用户的配置对象
			defaultUserSettings: {
				autoFillParam : 0,// 自动填充参数，0=否  1=智能填充  2=全部填充
				onlyUseLastParam : 0,// 是否仅使用上次请求参数
				showParamType : 1,// 是否展示字段的类型
				catalogShowType : 2,// 目录的展示方式，1=url分成一层一层的展示、2=整个url显示为一层展示
				treeShowType : 1,// 树形菜单展示方式，1=tree-angles、2=tree-menu、3=默认，4=tree-folders、5=tree-chevrons
				forceRewriteDomain: 0,// 强制重写域名 0=否 1=是
				projects : [],// 所有的项目列表
				removedProjects : [],// 被移除的项目列表
				prevWNow : 360
			}
		},
		methods: {

		},
		mounted: function(){
			getStorage(cacheKeys.userSettings, function(data){
				var empty = isEmpty(data) || isEmptyObject(data);
				data = empty ? app.defaultUserSettings : data;
				app.userSettings = data;
				app.catalogShowType = data.catalogShowType;
				app.treeShowType = data.treeShowType;
				app.showParamType = data.showParamType;
				app.onlyUseLastParam = data.onlyUseLastParam;
				app.autoFillParam = data.autoFillParam;
				app.forceRewriteDomain = data.forceRewriteDomain;
			});
		},
		watch: {
			catalogShowType: function(newVal, oldval){
				app.userSettings.catalogShowType = newVal;
				storeUserSettings(function(){
					getExport().regeneratePathTree();
				});
			},
			treeShowType: function(newVal, oldval){
				app.userSettings.treeShowType = newVal;
				storeUserSettings(function(){
					getExport().updateTreeShowType();
				});
			},
			showParamType: function(newVal, oldval){
				app.userSettings.showParamType = newVal;
				storeUserSettings();
			},
			onlyUseLastParam: function(newVal, oldval){
				app.userSettings.onlyUseLastParam = newVal;
				storeUserSettings();
			},
			autoFillParam: function(newVal, oldval){
				app.userSettings.autoFillParam = newVal;
				storeUserSettings();
			},
			forceRewriteDomain: function(newVal, oldval){
				app.userSettings.forceRewriteDomain = newVal;
				storeUserSettings();
			},
		}
	});

	// 存储用户的配置信息
	function storeUserSettings(success) {
		if (app.initCount-- <= 0) {
			setStorage(cacheKeys.userSettings, app.userSettings, function () {
				getExport().updateUserSettings(app.userSettings);
				if(typeof success == "function") {
					success();
				}
			});
		}
	}
</script>

<style>
	#app{padding-top: 10px;}
</style>
</html>



